<template>
  <div class="node-context">
    <el-row>
      <el-col :lg="12" :sm="24">
        <el-popconfirm title="确定要删除此节点全部数据?">
          <template #reference>
            <el-button type="danger">
              删除节点
            </el-button>
          </template>
        </el-popconfirm>
      </el-col>
    </el-row>

    <json-schema-form
        v-model="vRef"
        :formProps="{layoutColumn: 1}"
        :schema="schema"
    >
      <template #default="{ formData, formRefFn }">
        <el-row>
          <el-col :lg="12" :sm="24">
            <el-input v-model="newVariableName" placeholder="新属性名称"></el-input>
          </el-col>
          <el-col :lg="12" :sm="24">
            <el-button v-show="newVariableName" type="primary"
                       @click="addNewVariable(formData.value)">
              新增属性
            </el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="24" :sm="24">
            <el-button type="primary" @click="saveData(formData.value)">
              保存数据
            </el-button>
          </el-col>
        </el-row>
        <pre style="background-color: #eee;">{{ JSON.stringify(formData.value, null, 4) }}</pre>
      </template>
    </json-schema-form>
  </div>
</template>

<script lang="ts" setup>
import JsonSchemaForm from '@lljj/vue3-form-element';
import {fieldProps, vueUtils} from '@lljj/vue3-form-element';
import {ref, reactive} from "vue";
import {useUserOptionStore} from "@/core/common/StorageUtil";

const newVariableName = ref<string>('');
const props = defineProps({editData: {type: null, default: null}});
const editData = props.editData;
const userOptionStore = useUserOptionStore();
const categoryData = userOptionStore.businessJsonData;
const vRef = categoryData.master[editData[0]].node[editData[1]]

const schema = {
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "nodeKey": {
      "type": "string",
      "description": "节点ID，不配置默认为当前KEY",
      "title": "节点ID"
    },
    "nodeName": {
      "type": "string",
      "description": "节点名称",
      "title": "节点名称"
    },
    "allowOtherVariable": {
      "type": "boolean",
      "description": "是否允许其他未定义的变量进行操作(是否可保存未定义的参数) 默认false",
      "title": "否允许其他未定义的变量进行操作"
    },
    "otherVariableThrowException": {
      "type": "boolean",
      "description": "存在未配置的变量是否抛出异常（数据校验）",
      "title": "是否抛出异常"
    },
    "isMultiple": {
      "type": "boolean",
      "description": "是否为多重节点，默认false",
      "title": "是否为多重节点"
    },
    "ignoreFieldNames": {
      "type": "array",
      "default": [],
      "items": {
        "title": "忽略的参数名称",
        "type": "string"
      },
      "uniqueItems": true,
      "description": "忽略的参数名称（不进行处置和保存），默认值：[id,taskId,save,submit,startProcess,processKey,nodeKey]",
      "title": "忽略的参数名称"
    },
    "beforeSaveHandleNames": {
      "type": "array",
      "default": [],
      "items": {
        "title": "前置节点保存处理器名称",
        "type": "string"
      },
      "uniqueItems": true,
      "description": "前置节点保存处理器",
      "title": "前置节点保存处理器"
    },
    "saveHandleNames": {
      "type": "array",
      "default": [],
      "items": {
        "title": "执行节点保存处理器名称",
        "type": "string"
      },
      "additionalItems": {
        "title": "执行节点保存处理器名称",
        "type": "string"
      },
      "uniqueItems": true,
      "description": "执行节点保存处理器（有默认值，谨慎修改）默认值：20个",
      "title": "执行节点保存处理器"
    },
    "afterSaveHandleNames": {
      "type": "array",
      "default": [],
      "items": {
        "title": "后置节点保存处理器名称",
        "type": "string"
      },
      "uniqueItems": true,
      "description": "后置节点保存处理器",
      "title": "后置节点保存处理器"
    },
    "option": {
      "type": "object",
      "description": "此节点的操作配置",
      "title": "操作配置",
      "properties": {
        "save": {
          "type": "object",
          "title": "保存操作",
          "default": {}
        },
        "submit": {
          "type": "object",
          "title": "提交操作",
          "default": {}
        },
        "flow": {
          "type": "object",
          "title": "流转操作",
          "default": {}
        },
        "reject": {
          "type": "object",
          "title": "驳回操作",
          "default": {}
        }
      },
      "default": {}
    },
    "variable": {
      "type": "object",
      "description": "配置当前节点的变量信息，变量名称：{变量信息}",
      "title": "变量信息"
    }
  },
  "required": [
    "nodeName",
    "option",
    "variable"
  ]
};

const addNewVariable = (val: any) => {
  if(!val.variable){
    val.variable = {};
  }
  val.variable[newVariableName.value] = {variableName: newVariableName.value};
  newVariableName.value = '';
}

const saveData = (val: any) => {
  Object.assign(vRef, val);
}
</script>
<script lang="ts">
import {fieldProps, vueUtils} from '@lljj/vue3-form-element';

export default {
  name: "SillyCategoryNodeSchemaForm"
}
</script>

<style scoped>
.node-context {
  padding-left: 50px;
}
</style>